<template>
  <vxe-grid
    ref="vxeTable"
    border
    resizable
    keep-source
    height="300px"
    :loading="loading"
    :edit-rules="validRules"
    :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
    :columns="tableColumn"
    :data="dataSource"
  >
  </vxe-grid>
</template>
<script >
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
export default {
  name: 'SocialInsuranceTable',
  props: {
    dataSource: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      tableColumn: [
        { type: 'seq', width: 60 },
        { field: 'insuranceType', title: '社保类型', slots: { default: ({ row }) => {
          if (row.insuranceTemplateDetail) {
            return filterDictTextByCache('hr_insurance_type', row.insuranceTemplateDetail.insuranceType)
          } else {
            return ''
          }
        } }},
        { field: 'baseAmount', title: '缴费基数', editRender: { name: '$input', props: { type: 'number' }}},
        { field: 'insuranceTemplateDetail.personalScale', title: '个人缴比例' },
        { field: 'insuranceTemplateDetail.personalConstant', title: '个人缴金额' },
        { field: 'insuranceTemplateDetail.companyScale', title: '单位缴比例' }
      ],
      validRules: {
        baseAmount: [
          { required: true, message: '请填写执行金额/标准' },
          { min: 0, type: 'number', message: '请填写大于0的数字' }
        ]
      }
    }
  },
  methods: {
    validate() {
      return this.$refs.vxeTable.validate()
    },
    getTableData() {
      return this.$refs.vxeTable.getTableData()
    }
  }
}
</script>
